import { useContext, useEffect, useState } from "react";
import { PlaygroundContext } from "../../PlaygroundContext";
import { FileNameItem } from "./FileNameItem";
import styles from "./index.module.scss";
import {
	APP_COMPONENT_FILE_NAME,
	ENTRY_FILE_NAME,
	IMPORT_MAP_FILE_NAME,
} from "../../utils/initFiles";
import classNames from "classnames";

const readonlyFileNames = [
	ENTRY_FILE_NAME,
	IMPORT_MAP_FILE_NAME,
	APP_COMPONENT_FILE_NAME,
];

export default function FileNameList() {

	const {
		theme
	} = useContext(PlaygroundContext)

	const {
		files,
		removeFile,
		addFile,
		updateFileName,
		selectedFileName,
		setSelectedFileName,
	} = useContext(PlaygroundContext);

	const [tabs, setTabs] = useState([""]);

	const [creating, setCreating] = useState(false);

	const addTab = () => {
		const newFileName =
			"Comp" + Math.random().toString().slice(2, 8) + ".tsx";
		addFile(newFileName);
		setSelectedFileName(newFileName);
		setCreating(true);
	};

	const handleRemove = (name: string) => {
		removeFile(name);
		setSelectedFileName(ENTRY_FILE_NAME);
	};

	useEffect(() => {
		setTabs(Object.keys(files));
	}, [files]);

	const hanleEditComplete = (name: string, preName: string) => {
		updateFileName(preName, name);
		setSelectedFileName(name);
	};
	return (
		<div className={classNames(styles.tabs , theme)}>
			{tabs.map((item, index, arr) => (
				<FileNameItem
					key={item + index}
					value={item}
					readonly={readonlyFileNames.includes(item)}
					creating={creating && index === arr.length - 1}
					actived={selectedFileName === item}
					onClick={() => setSelectedFileName(item)}
					onEditComplete={(name: string) =>
						hanleEditComplete(name, item)
					}
					onRemove={e => {
						e.stopPropagation();
						handleRemove(item);
					}}
				></FileNameItem>
			))}
			<div className={styles.add} onClick={addTab}>
				+
			</div>
		</div>
	);
}
